<!--
 * @Description: 数据大屏
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2023-07-28 14:41:43
 * @LastEditTime: 2023-09-04 11:15:07
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="lb-count-index rel">
    <div id="load" v-if="!isLoad">
      <div class="load_img">
        <!-- 加载动画 -->
        <img
          class="jzxz1"
          src="https://lbqny.migugu.com/admin/anmo/pc/jzxz1.png"
        />
        <img
          class="jzxz2"
          src="https://lbqny.migugu.com/admin/anmo/pc/jzxz2.png"
        />
      </div>
    </div>
    <block v-if="isLoad">
      <div class="count-nav flex-center c-base abs">可视化数据平台</div>
      <div class="abs" style="width: 100%; top: 0; left: 0">
        <div class="count-infos-nav">
          <div class="item-column"></div>
          <div class="item-column"></div>
          <div class="item-column">
            <div
              @click="toShowDialog"
              class="count-text flex-center c-base cursor-pointer"
            >
              <div class="day-text flex-between">
                <div></div>
                <div class="flex-y-center">
                  <div>{{ day }}</div>
                  <div class="pl-lg pr-lg">
                    {{
                      ['周天', '周一', '周二', '周三', '周四', '周五', '周六'][
                        week
                      ]
                    }}
                  </div>
                </div>
              </div>
              <div class="flex-1 flex-y-center">
                <div class="time-text">{{ time }}</div>
                <i class="iconfont iconzhanghaoshezhi"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="count-infos">
        <div class="item-column">
          <div class="pd-lg rel" style="height: 20vh">
            <div class="common-panel abs"></div>
            <div
              class="flex-center count-list technician"
              style="height: calc(20vh - 32px)"
            >
              <div class="item-chlid flex-center flex-column">
                <div class="num">{{ detail.coach.total_count }}</div>
                <div class="text">
                  {{ `${$t('action.attendantName')}总数` }}
                </div>
              </div>
              <div class="item-chlid flex-center flex-column">
                <div class="num">{{ detail.coach.work_count }}</div>
                <div class="text">工作中</div>
              </div>
              <div class="item-chlid flex-center flex-column">
                <div class="num">{{ detail.coach.rest_count }}</div>
                <div class="text">休息中</div>
              </div>
              <div class="item-chlid flex-center flex-column">
                <div class="num">{{ detail.coach.notcertified_count }}</div>
                <div class="text">未认证</div>
              </div>
            </div>
          </div>
          <div class="rel column-content count-data mt-lg">
            <div class="common-panel abs"></div>
            <div class="common-title rel f-paragraph c-base">订单总览</div>
            <div class="echarts-info flex-center flex-column">
              <div class="count-list order">
                <div class="item-chlid">
                  <div class="num">{{ detail.order.today_order_cash }}</div>
                  <div class="text">
                    <i class="icon-dot" style="color: #4c9bfd"></i
                    >今日营收（元）
                  </div>
                </div>
              </div>
              <div class="count-order-space"></div>
              <div
                class="flex-x-between count-list order"
                style="width: 100%; padding: 0 10px 15px 0"
              >
                <div class="item-chlid">
                  <div class="num">{{ detail.order.today_order_count }}</div>
                  <div class="text">
                    <i class="icon-dot" style="color: #ed3f35"></i>今日订单量
                  </div>
                </div>
                <div class="item-chlid">
                  <div class="num">{{ detail.order.total_order_cash }}</div>
                  <div class="text">
                    <i class="icon-dot" style="color: #2bcd8e"></i
                    >累计业绩（元）
                  </div>
                </div>
                <div class="item-chlid">
                  <div class="num">{{ detail.order.total_order_count }}</div>
                  <div class="text">
                    <i class="icon-dot" style="color: #ffa500"></i>总订单量
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rel column-content notice-data mt-lg">
            <div class="common-panel abs"></div>
            <div class="common-title rel f-paragraph c-base">求救通知</div>
            <div class="echarts-info notice-list">
              <div
                class="head-row flex-y-center"
                v-if="detail.notice_data.length === 0"
              >
                暂无数据
              </div>
              <div class="marquee-view notice">
                <div
                  class="marquee"
                  :class="[
                    { scroll: subForm.notice_data },
                    { 'not-scroll': !subForm.notice_data }
                  ]"
                  v-if="detail.notice_data.length > 0"
                >
                  <div
                    class="row"
                    v-for="(item, index) in detail.notice_data"
                    :key="index"
                  >
                    <div
                      class="flex-between"
                      style="color: rgba(104, 216, 255, 0.5)"
                    >
                      <div class="flex-y-center">
                        姓名：
                        <div style="color: #ffa500">
                          {{ item.coach_name }}
                        </div>
                      </div>
                      <div>时间：{{ item.create_time | handleTime }}</div>
                    </div>
                    <div class="mt-sm flex-y-center">
                      地址：
                      <div class="ellipsis">
                        {{ item.address }}
                      </div>
                    </div>
                    <div class="mt-sm">正在发出求救信号，请及时查看</div>
                    <span class="icon-dot"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-column">
          <div style="height: 45vh">
            <div class="f-paragraph c-base pb-md">当前开放城市</div>
            <div style="width: 100%; height: calc(45vh - 20px)">
              <citys-echarts :datas="detail.city_list" />
            </div>
          </div>
          <div class="rel column-content order-count-data mt-lg">
            <div class="common-panel abs"></div>
            <div class="common-title rel f-paragraph c-base">订单统计</div>
            <div class="echarts-info">
              <sales-echarts :datas="detail.order_data" />
            </div>
          </div>
        </div>
        <div class="item-column">
          <div class="rel column-content user-data">
            <div class="common-panel abs"></div>
            <div class="echarts-info">
              <users-echarts :datas="detail.user_data" />
            </div>
          </div>
          <div class="rel column-content coach-data mt-lg">
            <div class="common-panel abs"></div>
            <div class="common-title rel f-paragraph c-base">
              {{ $t('action.attendantName') }}业绩排行
            </div>
            <div class="echarts-info notice-list coach">
              <div class="head-row flex-center">
                <span class="item-child">排名</span>
                <span class="item-child">姓名</span>
                <span class="item-child">总业绩</span>
                <span class="item-child">所属代理</span>
              </div>
              <div
                class="flex-y-center"
                style="margin-top: 50px; color: rgba(255, 255, 255, 0.8)"
                v-if="detail.coach_top.length === 0"
              >
                暂无数据
              </div>
              <div class="marquee-view coach">
                <div
                  class="marquee"
                  :class="[
                    { scroll: subForm.coach_top },
                    { 'not-scroll': !subForm.coach_top }
                  ]"
                  v-if="detail.coach_top.length > 0"
                >
                  <div
                    class="row"
                    v-for="(item, index) in detail.coach_top"
                    :key="index"
                  >
                    <div class="flex-center">
                      <div class="item-child">{{ index * 1 + 1 }}</div>
                      <div class="item-child pr-sm ellipsis">
                        {{ item.coach_name }}
                      </div>
                      <div class="item-child">{{ item.order_price }}</div>
                      <div class="item-child ellipsis" style="width: 30%">
                        {{ item.admin_name || '-' }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="rel column-content new-order-data mt-lg">
            <div class="common-panel abs"></div>
            <div class="common-title rel f-paragraph c-base">最新订单</div>
            <div class="echarts-info notice-list">
              <div
                class="head-row flex-y-center"
                v-if="detail.new_order.length === 0"
              >
                暂无数据
              </div>
              <div class="marquee-view order">
                <div
                  class="marquee"
                  :class="[
                    { scroll: subForm.new_order },
                    { 'not-scroll': !subForm.new_order }
                  ]"
                  v-if="detail.new_order.length > 0"
                >
                  <div
                    class="row"
                    v-for="(item, index) in detail.new_order"
                    :key="index"
                  >
                    <div
                      class="flex-center"
                      style="color: rgba(104, 216, 255, 0.5)"
                    >
                      ID：{{ item.order_id }}
                      <div class="ml-lg">项目：</div>
                      <div class="goods-name ellipsis" style="color: #2bcd8e">
                        {{ item.goods_name }}
                      </div>
                      <div class="flex-1 flex-y-center ml-lg">
                        支付金额：
                        <div style="color: #ed3f35">¥{{ item.pay_price }}</div>
                      </div>
                    </div>
                    <div class="mt-sm">地址：{{ item.address }}</div>
                    <div class="mt-sm">
                      时间：{{ item.create_time | handleTime }}
                    </div>
                    <span class="icon-dot"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="popup-setting flex-center fix" v-if="showDialog">
        <div class="setting-info c-base">
          <div class="flex-between">
            <div class="f-sm-title">
              <i class="icon-dot c-link"></i>实时监测
            </div>
            <i @click="toShowDialog" class="el-icon-plus cursor-pointer"></i>
          </div>
          <div class="space-xxl"></div>
          <div class="f-mini-title pt-lg pb-md">求救通知自动轮播</div>
          <el-radio-group
            @change="changeItems('notice', $event)"
            v-model="subForm.notice_data"
          >
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <div class="f-mini-title mt-lg pt-lg pb-md">
            {{ $t('action.attendantName') }}业绩排行自动轮播
          </div>
          <el-radio-group
            @change="changeItems('coach', $event)"
            v-model="subForm.coach_top"
          >
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <div class="f-mini-title mt-lg pt-lg pb-md">最新订单自动轮播</div>
          <el-radio-group
            @change="changeItems('order', $event)"
            v-model="subForm.new_order"
          >
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
        </div>
      </div>
    </block>
  </div>
</template>
<script>
import moment from 'moment'
import salesEcharts from './salesEcharts'
import usersEcharts from './usersEcharts'
import orderEcharts from './orderEcharts'
import citysEcharts from './citysEcharts'
export default {
  components: {
    salesEcharts,
    usersEcharts,
    orderEcharts,
    citysEcharts
  },
  data () {
    return {
      isLoad: false,
      keyArr: {
        notice: 'notice_data',
        coach: 'coach_top',
        order: 'new_order'
      },
      numArr: {
        1: 17,
        2: 8,
        3: 5,
        4: 4,
        5: 2,
        6: 1,
        7: 1
      },
      detail: {},
      subForm: {},
      showDialog: false,
      timer: null,
      dataTimer: null,
      day: '',
      week: '',
      time: ''
    }
  },
  async created () {
    let subForm = JSON.parse(window.localStorage.getItem('massage_count_scroll')) || {}
    if (!subForm.hasOwnProperty('notice_data')) {
      subForm = { notice_data: 1, coach_top: 1, new_order: 1 }
    }
    this.subForm = subForm
    await this.initIndex()
  },
  destroyed () {
    if (this.timer) clearInterval(this.timer)
    if (this.dataTimer) clearInterval(this.dataTimer)
  },
  watch: {
    'detail.notice_data' (newval, oldval) {
      if (newval) {
        this.changeItems('notice', this.subForm.notice_data)
      }
    },
    'detail.coach_top' (newval, oldval) {
      if (newval) {
        this.changeItems('coach', this.subForm.coach_top)
      }
    },
    'detail.new_order' (newval, oldval) {
      if (newval) {
        this.changeItems('order', this.subForm.new_order)
      }
    }
  },
  methods: {
    async initIndex () {
      if (this.timer) clearInterval(this.timer)
      this.day = moment(new Date().getTime()).format('YYYY-MM-DD')
      this.week = new Date().getDay()
      await this.getDetail()
      this.timer = setInterval(() => {
        let unix = moment(new Date().getTime()).format('HH:mm:ss')
        this.time = unix
      }, 1000)
      this.dataTimer = setInterval(() => {
        this.getDetail()
      }, 15000)
    },
    async getDetail () {
      let [detail, notice, order] = await Promise.all([this.$api.count.dataScreen(), this.$api.count.policeList({ page: 1, limit: 10, have_look: 0 }), this.$api.count.orderData({ day: 3 })])
      let { data } = detail
      data.order_data = order.data
      data.notice_data = notice.data.data
      this.detail.notice_data = []
      this.detail.coach_top = []
      this.detail.new_order = []
      this.$nextTick(() => {
        this.detail = data
      }, 0)
      this.isLoad = true
    },
    toShowDialog () {
      this.showDialog = !this.showDialog
    },
    changeItems (type, val) {
      window.localStorage.setItem('massage_count_scroll', JSON.stringify(this.subForm))
      this.$nextTick(() => {
        let { keyArr, numArr } = this
        let scrollKey = val ? 'scroll' : 'not-scroll'
        let dom = $(`.marquee-view.${type} .marquee.${scrollKey}`)[0]
        let len = this.detail[keyArr[type]].length
        let rowLen = 8
        let rows = $(dom).children()
        if (!val && rows.length > len) {
          let num = len < rowLen ? (numArr[len] + 1) * len : len
          for (let i = 0; i < num; i++) {
            rows[i].remove()
          }
        }
        if (val && rows.length <= len) {
          $(dom).append(rows.clone())
          if (len < rowLen) {
            for (let i = 0; i < numArr[len]; i++) {
              $(dom).append(rows.clone())
            }
          }
        }
      }, 100)
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'electronicFont'; /* 字体名称 */
  src: url('https://lbqny.migugu.com/admin/font/DS-DIGIT.TTF'); /* 字体文件相对路径 */
}
@font-face {
  font-family: 'icomoon'; /* 字体名称 */
  src: url('https://lbqny.migugu.com/admin/font/icomoon.ttf') format('truetype'); /* 字体文件相对路径 */
}
[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-size: 16px;
  line-height: 1;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // speak: none;
  // font-style: normal;
  // font-variant: normal;
  // text-transform: none;
  // line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dot:before {
  content: '\e900';
}

.lb-count-index {
  width: 100%;
  height: 100vh;
  line-height: 1.15;
  font-size: 0.5rem;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: 0 0 / cover;
  background-color: #101129;
}

.popup-setting {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9991;
  background: rgba(0, 0, 0, 0.2);
  .setting-info {
    width: 592px;
    height: 394px;
    padding: 30px;
    background: url(https://lbqny.migugu.com/admin/anmo/pc/popup_bg.png)
      no-repeat 0 0 / contain;
    .icon-dot {
      font-size: 20px;
    }
    .el-icon-plus {
      font-size: 30px;
      transform: rotate(45deg);
    }
    .el-radio {
      color: #fff;
    }
  }
}

.count-nav {
  width: 100%;
  font-size: 38px;
  height: 90px;
}
.count-text {
  font-size: 15px;
  height: 42px;
  .day-text {
    width: 60%;
  }
  .time-text {
    width: 40%;
  }
  .iconfont {
    font-size: 15px;
  }
}

.count-infos-nav {
  min-width: 1024px;
  max-width: 1920px;
  display: flex;
  padding: 0 20px;
  overflow: hidden;
  margin: 0 auto;

  .item-column {
    flex: 3;
  }
  .item-column:nth-child(2) {
    flex: 4;
    margin: 0 10px;
  }
}

.count-infos {
  /* 限定大小 */
  min-width: 1024px;
  max-width: 1920px;
  max-height: 100vh;
  margin: 0 auto;
  background: url(https://lbqny.migugu.com/admin/anmo/pc/head_bg.png) no-repeat
    0 0 / contain;
  display: flex;
  padding: 70px 20px 20px 20px;
  overflow: hidden;

  .item-column {
    flex: 3;
    .column-content {
      padding: 16px 30px;
    }
    .column-content.count-data {
      height: 24vh;
      .echarts-info {
        height: calc(24vh - 32px);
      }
    }
    .column-content.notice-data {
      height: calc(100vh - 44vh - 110px);
      .echarts-info {
        height: calc(100vh - 44vh - 110px - 32px);
      }
    }
    .column-content.order-count-data {
      height: calc(100vh - 45vh - 120px - 14px);
      .echarts-info {
        width: 100%;
        height: calc(100vh - 45vh - 120px - 64px);
        color: #fff;
      }
    }
    .column-content.user-data {
      height: 28vh;
      .echarts-info {
        width: 100%;
        height: calc(30vh - 50px);
        color: #fff;
      }
    }
    .column-content.coach-data {
      height: 29vh;
      .echarts-info {
        width: 100%;
        height: calc(30vh - 50px);
        color: #fff;
      }
    }
    .column-content.new-order-data {
      height: calc(100vh - 57vh - 110px);
      .echarts-info {
        width: 100%;
        height: calc(30vh - 50px);
        color: #fff;
      }
    }
  }
  .item-column:nth-child(2) {
    flex: 4;
    margin: 40px 10px 0 10px;
  }
  .common-panel {
    /* 边框 */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-image: url(https://lbqny.migugu.com/admin/anmo/pc/border.png) 51 38
      21 132;
    border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
  }
  .common-title {
    left: -10px;
  }
  .count-list {
    .item-chlid {
      text-align: center;
      margin-top: 5px;
      .text {
        font-size: 12px;
        color: #4c9bfd;
      }
    }
  }
  .count-list.technician {
    .item-chlid {
      width: 25%;
      .num {
        width: 80px;
        height: 80px;
        margin: 0 auto 8px auto;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: electronicFont;
        font-size: 24px;
        color: #fff32b;
      }
      .num:before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        background: url(https://lbqny.migugu.com/admin/anmo/pc/img1.png) center
          center;
        border-radius: 80px;
        background-size: 100% 100%;
        opacity: 0.4;
        left: 0;
        top: 0;
        animation: myfirst2 15s infinite linear;
      }

      .num:after {
        position: absolute;
        width: 86%;
        background: url(https://lbqny.migugu.com/admin/anmo/pc/img2.png) center
          center;
        border-radius: 80px;
        background-size: 100% 100%;
        opacity: 0.4;
        height: 86%;
        content: '';
        left: 7%;
        top: 7%;
        animation: myfirst 15s infinite linear;
      }
    }
  }
  .count-list.order {
    .item-chlid {
      .num {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }
    }
  }
  .count-order-space {
    height: 30px;
  }
  .notice-list {
    margin-left: -20px;

    .head-row {
      background: rgba(255, 255, 255, 0.1);
      font-size: 13px;
      height: 33px;
      padding: 0 10px;
      position: absolute;
      top: 39px;
      width: calc(100% - 20px);
      color: #68d8fe;
      line-height: 1.05;
      .item-child {
        width: 30%;
      }
      .item-child:nth-child(1) {
        width: 15%;
      }
      .item-child:nth-child(3) {
        width: 25%;
      }
    }
    .marquee-view {
      position: absolute;
      top: 40px;
      bottom: 18px;
      width: calc(100% - 20px);
      overflow: hidden;

      .marquee {
        width: 100%;
      }
      .marquee.not-scroll {
        height: 100%;
        overflow: auto;
      }

      .row {
        line-height: 1.05;
        color: #61a8ff;
        font-size: 12px;
        padding: 10px;
        border-top: 1px dashed #61a8ff;
        position: relative;
        .item-child {
          width: 30%;
        }
        .item-child:nth-child(1) {
          width: 15%;
        }
        .item-child:nth-child(3) {
          width: 25%;
        }
        .goods-name {
          max-width: 34%;
        }
      }
      .row:nth-child(1) {
        border-top: none;
      }
      .row:hover {
        color: #68d8ff;
        background: rgba(255, 255, 255, 0.1);
      }
      .row:hover .icon-dot {
        opacity: 1;
      }

      .icon-dot {
        position: absolute;
        left: -3px;
        top: 50%;
        margin-top: -7px;
        opacity: 0;
      }
    }
    .marquee-view.notice {
      .row {
        .ellipsis {
          width: calc(100% - 40px);
        }
      }
    }
    .marquee-view.coach {
      top: 73px;
    }
  }
}

/* 加载旋转动画 */
#load {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  .load_img {
    position: absolute;
    left: calc(50% - 182px);
    top: calc(50% - 182px);
    img {
      position: absolute;
      left: 0;
      top: 0;
    }
    .jzxz1 {
      animation: xz1 8s infinite linear;
    }
    .jzxz2 {
      animation: xz2 7s infinite linear;
    }
  }
}
@keyframes xz1 {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes xz2 {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes myfirst {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes myfirst2 {
  to {
    transform: rotate(360deg);
  }
}
@keyframes row {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
/* 调用动画 */
/* //infinite永久调用动画 */
.marquee-view.notice .marquee.scroll {
  animation: row 15s linear infinite;
}
.marquee-view.coach .marquee.scroll {
  animation: row 15s linear infinite;
}
.marquee-view.order .marquee.scroll {
  animation: row 15s linear infinite;
}
/*鼠标划入 停止动画  */
.marquee-view.notice .marquee.scroll:hover,
.marquee-view.coach .marquee.scroll:hover,
.marquee-view.order .marquee.scroll:hover {
  animation-play-state: paused;
}

@media screen and (max-width: 1920px) {
  .count-nav {
    font-size: 50px;
    height: 111px;
  }

  .count-text {
    font-size: 20px;
    height: 55px;
    .day-text {
      width: 57%;
    }
    .iconfont {
      font-size: 20px;
    }
  }
  .count-infos {
    // 75
    padding: 90px 20px 20px 20px;
    .f-paragraph {
      font-size: 18px;
    }

    .item-column {
      flex: 3;
      .column-content.notice-data {
        height: calc(100vh - 44vh - 130px);
        .echarts-info {
          height: calc(100vh - 44vh - 110px - 52px);
        }
      }
      .column-content.order-count-data {
        height: calc(100vh - 45vh - 120px - 34px);
        .echarts-info {
          height: calc(100vh - 45vh - 120px - 84px);
        }
      }
      .column-content.user-data {
        height: calc(28vh - 20px);
        .echarts-info {
          height: calc(30vh - 70px);
        }
      }
    }
    .count-list {
      .item-chlid {
        .text {
          font-size: 17px;
        }
      }
    }
    .count-list.technician {
      .item-chlid {
        .num {
          width: 110px;
          height: 110px;
          font-size: 34px;
        }
        .num:before {
          border-radius: 110px;
        }

        .num:after {
          border-radius: 110px;
        }
      }
    }
    .count-list.order {
      .item-chlid {
        .num {
          font-size: 34px;
        }
      }
    }
    .notice-list {
      .head-row {
        font-size: 17px;
      }
      .marquee-view {
        .row {
          font-size: 16px;
        }
      }
      .marquee-view.notice {
        .row {
          .ellipsis {
            width: calc(100% - 55px);
          }
        }
      }

      .marquee-view {
        .row {
          .icon-dot {
            margin-top: -8px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1800px) {
  .count-nav {
    font-size: 48px;
    height: 103px;
  }

  .count-text {
    font-size: 19px;
    height: 52px;
    .day-text {
      width: 58%;
    }
    .iconfont {
      font-size: 19px;
    }
  }
  .count-infos {
    // 80
    padding: 85px 20px 20px 20px;
    .f-paragraph {
      font-size: 17px;
    }

    .item-column {
      flex: 3;
      .column-content.notice-data {
        height: calc(100vh - 44vh - 125px);
        .echarts-info {
          height: calc(100vh - 44vh - 110px - 47px);
        }
      }
      .column-content.order-count-data {
        height: calc(100vh - 45vh - 120px - 29px);
        .echarts-info {
          height: calc(100vh - 45vh - 120px - 79px);
        }
      }
      .column-content.user-data {
        height: calc(28vh - 15px);
        .echarts-info {
          height: calc(30vh - 65px);
        }
      }
    }

    .count-list {
      .item-chlid {
        .text {
          font-size: 15px;
        }
      }
    }
    .count-list.technician {
      .item-chlid {
        .num {
          width: 100px;
          height: 100px;
          font-size: 30px;
        }
        .num:before {
          border-radius: 100px;
        }

        .num:after {
          border-radius: 100px;
        }
      }
    }
    .count-list.order {
      .item-chlid {
        .num {
          font-size: 30px;
        }
      }
    }

    .notice-list {
      .head-row {
        font-size: 16px;
      }
      .marquee-view {
        .row {
          font-size: 15px;
        }
      }
      .marquee-view.notice {
        .row {
          .ellipsis {
            width: calc(100% - 50px);
          }
        }
      }
      .marquee-view {
        .row {
          .icon-dot {
            margin-top: -7px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1600px) {
  .count-nav {
    font-size: 44px;
    height: 92px;
  }

  .count-text {
    font-size: 17px;
    height: 46px;
    .day-text {
      width: 60%;
    }
    .iconfont {
      font-size: 17px;
    }
  }
  .count-infos {
    // 90
    padding: 77px 20px 20px 20px;
    .f-paragraph {
      font-size: 15px;
    }
    .item-column {
      flex: 3;
      .column-content.notice-data {
        height: calc(100vh - 44vh - 117px);
        .echarts-info {
          height: calc(100vh - 44vh - 110px - 39px);
        }
      }
      .column-content.order-count-data {
        height: calc(100vh - 45vh - 120px - 21px);
        .echarts-info {
          height: calc(100vh - 45vh - 120px - 71px);
        }
      }
      .column-content.user-data {
        height: calc(28vh - 7px);
        .echarts-info {
          height: calc(30vh - 57px);
        }
      }
    }
    .count-list {
      .item-chlid {
        .text {
          font-size: 13px;
        }
      }
    }
    .notice-list {
      .head-row {
        font-size: 14px;
      }
      .marquee-view {
        .row {
          font-size: 13px;
        }
      }
      .marquee-view.notice {
        .row {
          .ellipsis {
            width: calc(100% - 40px);
          }
        }
      }
      .marquee-view {
        .row {
          .icon-dot {
            margin-top: -7px;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1024px) and (max-width: 1440px) {
  .count-nav {
    font-size: 38px;
    height: 90px;
  }
  .count-text {
    font-size: 15px;
    height: 42px;
    .day-text {
      width: 60%;
    }
    .iconfont {
      font-size: 15px;
    }
  }
  .count-infos {
    padding: 70px 20px 20px 20px;
    .count-list {
      .item-chlid {
        .text {
          font-size: 12px;
        }
      }
    }
    .count-list.technician {
      .item-chlid {
        .num {
          width: 80px;
          height: 80px;
          font-size: 24px;
        }
        .num:before {
          border-radius: 80px;
        }

        .num:after {
          border-radius: 80px;
        }
      }
    }
    .count-list.order {
      .item-chlid {
        .num {
          font-size: 24px;
        }
      }
    }
    .count-order-space {
      height: 25px;
    }
    .notice-list {
      .head-row {
        font-size: 13px;
      }
      .marquee-view {
        .row {
          font-size: 12px;
        }
      }
      .marquee-view.notice {
        .row {
          .ellipsis {
            width: calc(100% - 40px);
          }
        }
      }
      .marquee-view {
        .row {
          .icon-dot {
            margin-top: -6px;
          }
        }
      }
    }
  }
}
</style>
